<template>
  <!-- 商品推荐 -->
  <div class="goods-block">
    <van-cell :title="title" icon="gift-o"></van-cell>
    <van-row type="flex" justify="center">
      <van-col span="8" v-for="(item,i) in list" :key="i"
               @click="handleClick(item.goodsId)">
        <div class="goods-item">
          <!-- 图片 -->
          <van-image :src="$fullUrl(item.goodsImg)"></van-image>
          <!-- 商品名 -->
          <div class="van-ellipsis">{{ item.goodsName }}</div>
          <!-- 单价 -->
          <div class="price">￥{{ item.goodsPrice.toFixed(2) }}</div>
        </div>

      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: 'homeGoods',
  props: {
    list: Array,
    title: String,
  },
  methods: {
    handleClick(id) {
      this.$router.push(`/goodsDetail/${id}`);
    }
  }
}
</script>
<style scoped>
.goods-block {
  /*background-color: #f0f1f4;*/
}

.van-cell {
  font-size: 16px;
  background-color: lightgray;
}

.goods-item {
  display: flex;
  flex-direction: column;
  background-color: white;
  margin: 5px;
  padding: 5px;
  border-radius: 10px;
  /*border:thin solid red ;*/


  font-size: 14px;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: red;
  text-align: right;
}
</style>
